<template>
	<div class="system-dic-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-user-search mb15">
				<el-input size="default" placeholder="请输入用户名" style="max-width: 180px"
					v-model="state.tableData.param.param.user_name.val">
				</el-input>
				<el-input size="default" placeholder="请输入pid" style="max-width: 180px"
					v-model="state.tableData.param.param.pid.val">
				</el-input>
				<el-select v-model="state.tableData.param.param.company_id.val" filterable placeholder="请选择所属公司" clearable
					size="default" style="width: 180px;">
					<el-option v-for="(item) in state.platsData.company" :key="item.id" :label="item.title"
						:value="item.id"></el-option>
				</el-select>
				<el-input size="default" placeholder="请输入调查ID" style="max-width: 180px"
					v-model="state.tableData.param.param.jobId.val">
				</el-input>
				<el-input size="default" placeholder="请输入语言" style="max-width: 180px"
					v-model="state.tableData.param.param.langCode.val">
				</el-input>
				<el-input size="default" placeholder="请输入IP" style="max-width: 180px"
					v-model="state.tableData.param.param.ip.val">
				</el-input>
				<el-date-picker size="default" style="width: 280px;" v-model="state.tableData.param.param.create_time.val" 
					type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间"
					:default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]" value-format='X' />
				<!-- <el-input size="default" placeholder="请输入时间差异最大值" style="max-width: 180px"
					v-model="state.tableData.param.param.timeDiff.val">
				</el-input> -->
				<el-button size="default" type="primary" @click="seachClick">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button size="default" type="primary" v-auth="'/takenote/download'" :loading="state.daochulodding"
					@click="deriveCompany()">
					<el-icon>
						<ele-Download />
					</el-icon>
					导出
				</el-button>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" row-key="id"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 100%">
				<!-- <el-table-column prop="id" label="ID" show-overflow-tooltip width="80"></el-table-column> -->
				<!-- <el-table-column label="用户id" prop="user_id" width="100"></el-table-column> -->
				<el-table-column label="用户名" prop="user_name" width="100"></el-table-column>
				<el-table-column label="公司名" prop="company_name" show-overflow-tooltip width="100"></el-table-column>
				<el-table-column label="PID" prop="pid" width="180"></el-table-column>
				<el-table-column prop="jobId" label="调查ID" show-overflow-tooltip width="150"></el-table-column>
				<el-table-column prop="langCode" label="语言" width="100"></el-table-column>
				<!-- <el-table-column label="用户id" prop="user_id" width="100"></el-table-column> -->
				<el-table-column label="时间差异" prop="timeDiff" width="100"></el-table-column>
				<el-table-column label="问题" prop="question"></el-table-column>
				<el-table-column label="答案" prop="answer"></el-table-column>
				<el-table-column prop="ip" label="IP" width="150" show-overflow-tooltip></el-table-column>
				<el-table-column label="创建时间" width="200">
					<template #default="scope">
						<span>{{ dateFormatYMDHMS(scope.row.create_time * 1000) }}</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
				:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.page"
				background v-model:page-size="state.tableData.param.limit"
				layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script setup name="platform">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { takenoteApi } from '/@/api/takenote/index';
import { commApi } from '/@/api/comm/index';
import commonFunction from '/@/utils/commonFunction';
import { ElMessageBox, ElMessage } from 'element-plus';
// 定义变量内容
const { dateFormatYMDHMS } = commonFunction();
const paramOp = {
	timeDiff: '<',
	create_time:'time'
}

const state = reactive({
	daochulodding:false,
	fatherData:null,
	platsData: {
		company: [],
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			param: {
				user_name: {},
				pid: {},
				jobId: {},
				langCode: {},
				timeDiff: {},
				company_id:{},
				ip:{},
				create_time: {},
			},
			page: 1,
			limit: 10,
		},
	},
});

// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	for (let key in state.tableData.param.param) {
		if (state.tableData.param.param[key].val && state.tableData.param.param[key].val !== '') {
			state.tableData.param.param[key].op = paramOp[key] || '='
		} else {
			state.tableData.param.param[key] = {}
		}
	}
	takenoteApi().inn(state.tableData.param).then(res => {
		state.tableData.data = res.data.list;
		state.tableData.total = res.data.total;
		state.tableData.loading = false;
	})
};
const getPlats = () => {
	commApi().getPlats().then(res => {
		state.platsData = res.data
	})
}
const seachClick = () => {
	onHandleCurrentChange(1)
}

// 分页改变
const onHandleSizeChange = (val) => {
	state.tableData.param.limit = val;
	getTableData();
};

// 分页改变
const onHandleCurrentChange = (val) => {
	state.tableData.param.page = val;
	getTableData();
};

//导出
const deriveCompany = async () => {
	ElMessageBox.confirm(`确认导出?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		for (let key in state.tableData.param.param) {
			if (state.tableData.param.param[key].val && state.tableData.param.param[key].val !== '') {
				state.tableData.param.param[key].op = paramOp[key] || '='
			} else {
				state.tableData.param.param[key] = {}
			}
		}
		state.daochulodding = true
		try {
			let res = await takenoteApi().innDownload(state.tableData.param)
			if (res) {
				// 假设 data 是返回来的二进制数据
				const url = window.URL.createObjectURL(new Blob([res], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }))
				const link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				link.setAttribute('download', new Date().toLocaleString() + '.xlsx')
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
			}
		} catch (error) {

		}
		state.daochulodding = false
	}).catch(() => { });
}

onMounted(() => {
	getTableData()
	getPlats()
})
</script>

<style scoped>
/* 这里可以添加组件的样式 */
</style>